<template>
    <div class="view-home">
        <el-row :gutter="15">

            <el-col :lg="6" :md="12" :xs="24">
                <el-card class="box-card bg-primary">
                    <el-icon :size="50">
                        <User />
                    </el-icon>
                    <div class="main">
                        <p>用户数量</p>
                        <h2>{{ data.dashboardInfo.userCount }}</h2>
                    </div>
                </el-card>
            </el-col>

            <el-col :lg="6" :md="12" :xs="24">
                <el-card class="box-card bg-success">
                    <el-icon :size="50">
                        <Male />
                    </el-icon>
                    <div class="main">
                        <p>男 生</p>
                        <h2>{{ data.dashboardInfo.boyCount }}</h2>
                    </div>
                </el-card>
            </el-col>

            <el-col :lg="6" :md="12" :xs="24">
                <el-card class="box-card bg-danger">
                    <el-icon :size="50">
                        <Female />
                    </el-icon>
                    <div class="main">
                        <p>女 生</p>
                        <h2>{{ data.dashboardInfo.girlCount }}</h2>
                    </div>
                </el-card>
            </el-col>

            <el-col :lg="6" :md="12" :xs="24">
                <el-card class="box-card bg-purple">
                    <el-icon :size="50">
                        <Cpu />
                    </el-icon>
                    <div class="main">
                        <p>系统信息</p>
                        <h4>操作系统: {{ data.dashboardInfo.systemInfo.type }} {{ data.dashboardInfo.systemInfo.arch }}</h4>
                        <h4>运行内存: {{ data.dashboardInfo.systemInfo.totalmem }}</h4>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
  
<script lang="ts" name="home" setup>
import { onMounted, reactive } from "vue";
import { User, Female, Male, Cpu } from '@element-plus/icons-vue';
import { useCool } from "/@/cool";
const { service } = useCool();
var data = reactive({
    dashboardInfo: {
        userCount: 0,
        boyCount: 0,
        girlCount: 0,
        systemInfo: {
            type: "",
            arch: "",
            totalmem: 0
        }
    },
});

onMounted(async () => {
    data.dashboardInfo = await service.base.sys.dashboard.dashboardInfo();
});
</script>
  
<style lang="scss">
.view-home {
    .box-card {
        display: flex;
        margin-bottom: 5px;
        padding: 5px;
        color: #fff;

        .el-card__body {
            flex: 1;
            display: flex;
            min-height: 9vh;
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-start;

            .el-icon {
                margin-bottom: 10px;
            }

            .main {
                text-align: left;
                font-size: 14px;

                p {
                    margin: 0;
                }

                h2 {
                    margin-top: 5px;
                    font-size: 24px;
                    font-weight: 400;
                }

                h4 {
                    margin-top: 5px;
                    font-size: 14px;
                    font-weight: 400;
                }
            }
        }
    }

    .bg-primary {
        background-color: #33cabb;
    }

    .bg-success {
        background-color: #15c377;
    }

    .bg-danger {
        background-color: #f96868;
    }

    .bg-purple {
        background-color: #926dde;
    }
}
</style>